<template>
	<div>
		<el-card class="box-card">
			<div class="Serach_b">
				<el-input type="input" autosize placeholder="请输入订单编号" v-model="fy.orderNo"
					@keyup.enter.native="seachEnter" style="width: 300px;margin-left: 20px;" />
				<el-button type="primary" icon="el-icon-search" @click="SearchData()">搜索</el-button>
			</div>
			<el-table :data="CommentList" border>
				<el-table-column prop="orderNo" label="订单编号" />
				<el-table-column prop="goodsId" label="商品编号" />
				<el-table-column prop="userId" label="会员ID" />
				<el-table-column prop="goodsScore" label="商品评分" />
				<el-table-column prop="serviceScore" label="服务评分" />
				<el-table-column prop="content" label="点评内容" />
				<el-table-column prop="replyTime" label="商家回复时间" />
				<el-table-column label="上传图片" width="120px">
					<template slot-scope="scope">
						<el-image style="width: 100px; height: 100px" v-for="(item, index) in scope.row.images"
							:key="index" :src="item" :preview-src-list="scope.row.images">
						</el-image>
					</template>
				</el-table-column>
				<el-table-column label="是否显示">
					<template slot-scope="scope">
						<span v-if="scope.row.isShow == 0">否</span>
						<span v-else>是</span>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" />
				<el-table-column label="操作" width="80px">
					<template slot-scope="scope">
						<div class="button">
							<el-button type="danger" size="mini" @click="DelClick(scope.row)">删除</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 15]"
				:page-size="fy.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</el-card>
	</div>
</template>

<script>
	import * as syOrderCommentApi from "@/api/Add";
	import * as OrderCommentApi from "@/api/Search";
	import {
		timestampToTime
	} from "@/utils/date";
	import ipconfig from "@/utils/ipconfig";
	export default {
		data() {
			return {
				ipconfig: ipconfig,
				timestampToTime,
				fy: {
					size: 10,
					current: 1,
				},
				total: 0,
				CommentList: [],
				CommentImageList: [],
			};
		},
		methods: {
			DelClick(row) {
				this.$confirm("确认关闭？")
					.then((_) => {
						syOrderCommentApi.DelOrderComment({
							idList: row.id
						}).then((res) => {
							if (res.data == true) {
								this.dialogVisible = false;
								this.SearchData();
								this.$notify({
									title: "成功",
									message: "删除成功",
									type: "success",
								});
							} else {
								this.dialogVisible = false;
								this.SearchData();
								this.$notify({
									title: "失败",
									message: "删除失败",
									type: "error",
								});
							}
						});
						done();
					})
					.catch((_) => {});
			},
			SearchData() {
				OrderCommentApi.InsertOrderComment(this.fy).then((res) => {
					this.total = res.data.total;
					this.CommentList = res.data.records;

					this.CommentList.forEach((item) => {
						if (item.images) {
							let list = item.images.split(",");
							if (list.length >= 1) {
								item.images = list.map((k) => ipconfig.image + k);
							}
						}
					});
				});
			},
			handleSizeChange(value) {
				this.fy.size = value;
				this.SearchData();
			},
			handleCurrentChange(value) {
				this.fy.current = value;
				this.SearchData();
			},
		},
		created() {
			this.SearchData();
		},
	};
</script>

<style lang="scss" scoped>
	.el-pagination {
		margin-top: 10px;
	}

	.box-card {
		width: 95%;
		margin: auto;
	}

	.Serach_b {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.Serach_b .el-button {
		margin-left: 20px;
	}

	.el-textarea {
		margin-left: 20px;
		width: 30%;
	}
</style>
